<template>
    <div>
        <Header></Header>
        <div class="newsDetail">
            <h3 v-html="news.title"></h3>
            <img :src="news.pic" />
            <div v-html="news.content"></div>
            <p class="time">{{news.dateAdd}}</p>
        </div>
    </div>
</template>

<script>
import Header from "@/components/Header/Header";
export default {
    components: {
        Header,
    },
    data() {
        return {
            news: {},
        };
    },
    methods: {
        getDetail() {
            let num = Number(this.$route.query.id);
            this.$API.getNewsDetail({ params: { id: num } }).then((res) => {
                console.log(res.data.data);
                this.news = res.data.data;
            });
        },
    },
    mounted() {
        this.getDetail();

        // console.log(this.news);
    },
};
</script>

<style lang="scss">
.newsDetail {
    width: 100%;
    height: 92vh;
    overflow: auto;
    h3 {
        text-align: center;
    }
    img {
        width: 100%;
        height: 26vh;
    }
    .time {
        height: 3vh;
        line-height: 3vh;
        text-align: right;
    }
}
</style>